<!DOCTYPE html>
<html>
<head>
    <title>video</title>
    <style type="text/css">
    </style>
</head>
<body>
    <video id="video1"  width="300" height="200" controls="controls" autoplay="autoplay" loop="loop">
        <source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="video/mp4">
        <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
    </video>

    <div class="btn_ctrl">
        <button onclick="playPause()">播放/暂停</button> 
        <button onclick="makeBig()">大</button>
        <button onclick="makeNormal()">中</button>
        <button onclick="makeSmall()">小</button>
    </div>

    <pre>
        controls="controls"向用户显示控件，比如播放按钮
        autoplay="autoplay"视频在就绪后马上播放
        loop="loop" 循环播放
        preload="auto|meta|none" 如果设置了 autoplay 属性，则忽略该属性。
            auto - 当页面加载后载入整个视频
            meta - 当页面加载后只载入元数据
            none - 当页面加载后不载入视频
    </pre>

    <script type="text/javascript">
    var video1 = document.getElementById("video1");
    function playPause(){
        if(video1.paused){
            video1.play();
        }else{
            video1.pause();
        }
    }
    function makeBig(){
        video1.width=600;
        video1.height=400;
    }
    function makeNormal(){
        video1.width=300;
        video1.height=200;
    }
    function makeSmall(){
        video1.width=150;
        video1.height=100;
    }
    </script>
</body>
</html>